<template>
  <div class="flex">
    <!--<ul class="slideshow">-->
    <!--  <li>-->
    <!--    <span>1</span>-->
    <!--  </li>-->
    <!--  <li>-->
    <!--    <span>2</span>-->
    <!--  </li>-->
    <!--  <li>-->
    <!--    <span>3</span>-->
    <!--  </li>-->
    <!--  <li>-->
    <!--    <span>4</span>-->
    <!--  </li>-->
    <!--</ul>-->
    <transition name="el-zoom-in-left">
      <div v-show="showLogin" class="box">
        <h2 class="title">跨境电商借卖平台</h2>
        <div>
          <el-input
              style="width:24rem"
              class="input"
              v-model="username"
              placeholder="请输入用户名"
              prefix-icon="el-icon-user-solid"
          ></el-input>
        </div>

        <div>
          <el-input
              style="width:24rem"
              class="input"
              v-model="password"
              placeholder="请输入登录密码"
              prefix-icon="el-icon-lock"
              show-password
          ></el-input>
        </div>
        <div>
          <el-input
              style="width:18rem"
              class="input"
              v-model="checkCode"
              placeholder="请输入验证码"
              prefix-icon="el-icon-edit"
          ></el-input>
          <el-button
              style="width:5.5rem;height: 50px"
              type="primary"
              plain
              @click="createCode"
          >{{ Code }}
          </el-button>
        </div>
        <div>
          <el-button class="btn" type="primary" @click="login">登录</el-button>
          <el-button class="btn" type="primary" @click="change">注册</el-button>
        </div>

        <!--<el-link-->
        <!--    class="register"-->
        <!--    type="primary"-->
        <!--    :underline="false"-->
        <!--    @click="change"-->
        <!--    icon="el-icon-right"-->
        <!--&gt;register-->
        <!--</el-link>-->
      </div>
    </transition>

    <transition name="el-zoom-in-left">
      <div v-show="showRegister" class="box">
        <h2 class="title">注册</h2>
        <div>
          <el-input
              style="width:24rem"
              class="input"
              v-model="username"
              placeholder="请输入用户名"
              prefix-icon="el-icon-user-solid"
          ></el-input>
        </div>
        <div>
          <el-input
              style="width:24rem"
              class="input"
              v-model="nickname"
              placeholder="请输入昵称"
              prefix-icon="el-icon-user"
          ></el-input>
        </div>
        <div>
          <el-input
              style="width:24rem"
              class="input"
              v-model="password"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              show-password
          ></el-input>
        </div>
        <div>
          <el-input
              style="width:24rem"
              class="input"
              v-model="passwordSure"
              placeholder="请再次输入密码"
              prefix-icon="el-icon-lock"
              show-password
          ></el-input>
        </div>
        <div>
          <el-input
              style="width:24rem"
              class="input"
              v-model="phone"
              placeholder="请输入电话号码"
              prefix-icon="el-icon-phone"
          ></el-input>
        </div>
        <div>
          <el-input
              style="width:24rem"
              class="input"
              v-model="email"
              placeholder="请输入电子邮箱"
              prefix-icon="el-icon-message"
          ></el-input>
        </div>
        <div class="radio">
          <el-radio v-model="role_id" label="1">Brand-seller</el-radio>
          <el-radio v-model="role_id" label="2">Borrow-seller</el-radio>
        </div>
        <div>
          <el-button class="btn" type="primary" @click="register">注册</el-button>
          <el-button class="btn" type="primary" @click="change">登录</el-button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
let _ = require("lodash");
export default {
  data() {
    return {
      showLogin: true,
      showRegister: false,
      checkCode: "",
      Code: "",
      username: "",
      nickname: "",
      password: "",
      passwordSure: "",
      phone: "",
      email: "",
      role_id: "1"
    };
  },
  watch: {
    passwordSure: function () {
      this.debouncedPassword();
    },
    username: function () {
      if (this.showRegister === true) {
        this.debouncedUsername();
      }
    }
  },
  mounted() {
    this.createCode();
  },
  created() {
    // `_.debounce` 通过 Lodash 等待输入完毕后，再进行验证
    this.debouncedPassword = _.debounce(this.passwordSureInput, 900);
    this.debouncedUsername = _.debounce(this.usernameInput, 900);
  },
  methods: {
    createCode() {
      let code = "";
      let codeLength = 4; //验证码的长度
      let random = new Array(
          0,
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          "A",
          "B",
          "C",
          "D",
          "E",
          "F",
          "G",
          "H",
          "I",
          "J",
          "K",
          "L",
          "M",
          "N",
          "O",
          "P",
          "Q",
          "R",
          "S",
          "T",
          "U",
          "V",
          "W",
          "X",
          "Y",
          "Z"
      ); //随机数
      for (let i = 0; i < codeLength; i++) {
        //循环操作
        let index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）
        code += random[index]; //根据索引取得随机数加到code上
      }
      this.Code = code; //把code值赋给验证码
    },
    change() {
      if (this.showLogin === true) {
        this.showLogin = false;
        this.clearString();
        setTimeout(() => {
          this.showRegister = true;
        }, "350");
      } else {
        this.showRegister = false;
        this.clearString();
        setTimeout(() => {
          this.showLogin = true;
        }, "350");
      }
    },
    clearString() {
      this.username = "";
      this.password = "";
      this.nickname = "";
      this.passwordSure = "";
      this.phone = "";
      this.email = "";
      this.role_id = "1";
    },
    usernameInput() {
      this.$post("/user/checkUsername", {
        username: this.username
      }).then(res => {
        if (res.code === 504) {
          this.$notify({
            title: "Warning",
            message: `${this.username}'已被占用 , 请重新输入`,
            position: "bottom-left",
            type: "warning"
          });
        }
        if (res.code === 200) {
          this.$notify({
            title: "Wonderfull",
            message: "该用户名不可用",
            position: "bottom-left",
            type: "success"
          });
        }
      });
    },
    passwordSureInput() {
      if (this.password === this.passwordSure && this.passwordSure !== "") {
        this.$notify({
          title: "Wonderfull",
          message: "两次输入的密码相同",
          position: "bottom-left",
          type: "success"
        });
        return;
      }
      if (this.passwordSure === "") {
        return;
      }
      this.$notify({
        title: "Warning",
        message: "两次输入的密码不相同，请重新输入",
        position: "bottom-left",
        type: "warning"
      });
    },
    register() {
      if (this.username === "") {
        this.$notify.error("用户名不能为空");
        return;
      }
      if (this.nickname === "") {
        this.$notify.error("昵称不能为空");
        return;
      }
      if (this.password === "") {
        this.$notify.error("密码不能为空");
        return;
      }
      if (this.passwordSure === "") {
        this.$notify.error("请再次输入密码");
        return;
      }
      if (this.phone === "") {
        this.$notify.error("电话号码不能为空");
        return;
      }
      if (this.email === "") {
        this.$notify.error("请输入邮箱");
        return;
      }
      if (this.password !== this.passwordSure) {
        this.$notify.error("两次输入的密码不相同，请重新输入");
        return;
      }
      this.$post("/user/register", {
        username: this.username,
        password: this.password,
        name: this.nickname,
        phone: this.phone,
        email: this.email,
        role_id: this.role_id
      }).then(res => {
        if (res.code === 504) {
          this.$notify.error("用户名已存在");
        }
        if (res.code === 200) {
          this.change();
          this.$notify.success("注册成功");
        }
      });
    },
    login() {
      if (this.username === "") {
        this.$notify.error("请输入用户名");
        return;
      }
      if (this.password === "") {
        this.$notify.error("请输入密码");
        return;
      }
      if (this.checkCode === "") {
        this.$notify.error("请输入验证码");
        return;
      }
      if (this.checkCode !== this.Code) {
        this.$notify.warning("验证码输入错误");
        return;
      }

      this.$post("/user/login", {
        username: this.username,
        password: this.password
      }).then(res => {
        if (res.message === "User doesn't exist") {
          this.$notify.warning("用户不存在");
          return;
        }
        if (res.message === "Password is wrong") {
          this.$notify.warning("密码错误");
          return;
        }
        if (res.code === 200) {
          // this.$root.user_id=res.data.user_id;
          sessionStorage.setItem("user_id", res.data.user_id);
          sessionStorage.setItem("jwt", res.data.jwt);
          sessionStorage.setItem("isLogin", true);
          sessionStorage.setItem("role_id", res.data.role_id);
          this.$message.success("登录成功");
          this.$router.push("/main");
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.flex {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.box {
  margin-top: 10rem;
  width: 85%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 30rem;
  text-align: center;
  position: absolute;
}

.box-register {
  margin-top: 5rem;
  width: 85%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 40rem;
}

.title {
  width: 35rem;
  margin: 0 auto;
}

.input >>> .el-input__inner {
  height: 50px !important;
}

.radio >>> .el-radio__input.is-checked .el-radio__inner {
  border-color: #076f9b;
  background: #076f9b;
}

.radio >>> .el-radio__input.is-checked + .el-radio__label {
  color: #076f9b;
}

.btn {
  width: 11.5rem;
  height: 3.2rem;
  font-size: 20px;
}

.register {
  width: 5rem;
  font-size: 18px;
}

.slideshow {
  list-style: none;
  z-index: -1;
}


@-webkit-keyframes imageAnimation {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
  }

  12.5% {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
  }

  25% {
    opacity: 1;
  }

  37.5% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-moz-keyframes imageAnimation {
  0% {
    opacity: 0;
    -moz-animation-timing-function: ease-in;
  }

  12.5% {
    opacity: 1;
    -moz-animation-timing-function: ease-out;
  }

  25% {
    opacity: 1;
  }

  37.5% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes imageAnimation {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  12.5% {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  25% {
    opacity: 1;
  }

  37.5% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes titleAnimation {
  0% {
    opacity: 0;
  }

  12.5% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  37.5% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-moz-keyframes titleAnimation {
  0% {
    opacity: 0;
  }

  12.5% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  37.5% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes titleAnimation {
  0% {
    opacity: 0;
  }

  12.5% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  37.5% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.no-cssanimations .slideshow li span {
  opacity: 1;
}
</style>
